<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <title>接口明细</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="${request.contextPath}/css/font.css">
    <link rel="stylesheet" href="${request.contextPath}/css/xadmin.css">
    <link rel="stylesheet" href="${request.contextPath}/css/layui.css">
    <script type="text/javascript" src="${request.contextPath}/js/jquery.min.js"></script>
    <script type="text/javascript" src="${request.contextPath}/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="${request.contextPath}/js/xadmin.js"></script>

    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  
  <body class="layui-anim layui-anim-up">
    <div class="x-nav">


<!--
        <button class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
-->

        <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:window.open(location.href);" title="打开新窗口">
            <i class="layui-icon" style="line-height:30px"></i></a>

          <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
    </div>
    <div class="x-body">

        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 15px;">
             <legend>基本信息：</legend>
        </fieldset>

      <div class="layui-row layui-col-space12">
             <div class="layui-col-md3">
                  <span lay-separator="">
                  <a href>接口名称:&nbsp;&nbsp;&nbsp;&nbsp;${interfaceDetail.description!}</a></span>
              </div>
              <div class="layui-col-md3">
                      <span lay-separator="">
                      <a href>接口类型:&nbsp;&nbsp;&nbsp;&nbsp;${interfaceDetail.type!}</a></span>
              </div>
             <div class="layui-col-md6">
                    <span lay-separator="">
                    <a href>接口地址:&nbsp;&nbsp;&nbsp;&nbsp;${interfaceDetail.name!}</a>
                    </span>
             </div>

      </div>

        <#if interfaceDetail.type=='REST'>
            <div class="layui-row layui-col-space10">

                <div class="layui-col-md2">
                    <span lay-separator="">
                        <a href>请求方式：${interfaceDetail.requestType!}</a>
                     </span>
                </div>

                <div class="layui-col-md8">
                    <span lay-separator="">
                    <a href>URL：${interfaceDetail.address!}</a>
                    </span>
                </div>
            </div>
        </#if>

        <div class="layui-row layui-col-space10">

               
             <div class="layui-col-md2">
               <span lay-separator="">
                    <a href>接口状态： ${interfaceDetail.status!}</a>
                    </span>
             </div>

             <div class="layui-col-md2">
                <span lay-separator="">
                    <a href>所属系统：${interfaceDetail.systemName!}</a>
                 </span>
             </div>
             <div class="layui-col-md2">
                <span lay-separator="">
                    <a href>接口使用方: ${interfaceDetail.caller!} </a>
                 </span>
             </div>
                <div class="layui-col-md2">
                <span lay-separator="">
                    <a href>接口提供时间：${(interfaceDetail.createTime?date)!}  </a>
                 </span>
             </div>
                <div class="layui-col-md2">
                <span lay-separator="">
                    <a href>接口最后修改时间：${(interfaceDetail.updateTime?date)!}</a>
                 </span>
             </div>
      </div>






       <div class="layui-row layui-col-space10">
           <div class="layui-col-md10">
             <span lay-separator="">
               接口描述：<textarea placeholder="接口说明信息，接口说明信息，接口说明信息，接口说明信息" class="layui-textarea" readonly>
                 ${interfaceDetail.memo!}
             </textarea>
            </span>
           </div>
        </div>


        <#if (interfaceDetail.reqParamTypeBO)??>


            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 15px;">
                <legend>请求参数：${interfaceDetail.reqParamTypeBO.paramTypeName}</legend>
            </fieldset>

            <table class="layui-table layui-form">
                <colgroup>
                    <col width="15%">
                    <col width="20%">
                    <col width="5%">
                    <col width="5%">
                    <col width="5%">
                    <col width="35%">
                    <col width="15%">
                </colgroup>
                <thead>
                <tr>
                    <th>请求参数</th>
                    <th>参数类型</th>
                    <th>长度</th>
                    <th>是否必填</th>
                    <th>默认值</th>
                    <th>接口描述</th>
                    <th>示例值</th>
                </thead>
                <tbody class="x-cate">

                <#list interfaceDetail.reqParamTypeBO.paramFieldList as paramField>
                    <tr cate-id='${paramField.id?c}' fid='${paramField.parentId?c}' >

                        <#if paramField.hasGenericParam>
                            <td>
                                <i class="layui-icon x-show" status='true'>&#xe623;</i>
                                    ${paramField.paramName}
                            </td>
                           <#elseif paramField.parentId==0>
                               <td>${paramField.paramName}</td>
                           <#else>
                               <td>&nbsp;&nbsp;&nbsp;&nbsp;${paramField.paramName}</td>
                        </#if>

                        <td><xmp>${paramField.paramType}</xmp></td>
                        <td>${paramField.paramLength}</td>
                        <td>${paramField.required}</td>
                        <td>${paramField.defaultValue}</td>
                        <td>${paramField.paramDescription}</td>
                        <td>${paramField.example}</td>
                    </tr>
                </#list>
                </tbody>
            </table>
        </#if>


        <#if (interfaceDetail.respParamTypeBO)??>


            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 15px;">
                <legend>返回值:${interfaceDetail.respParamTypeBO.paramTypeName}</legend>
            </fieldset>
            <table class="layui-table layui-form">
                <colgroup>
                    <col width="15%">
                    <col width="20%">
                    <col width="5%">
                    <col width="5%">
                    <col width="5%">
                    <col width="35%">
                    <col width="15%">
                </colgroup>
                <thead>
                <tr>
                    <th>请求参数</th>
                    <th>参数类型</th>
                    <th>长度</th>
                    <th>是否必填</th>
                    <th>默认值</th>
                    <th>接口描述</th>
                    <th>示例值</th>
                </thead>
                <tbody class="x-cate">

                <#list interfaceDetail.respParamTypeBO.paramFieldList as paramField>
                    <tr cate-id='${paramField.id?c}' fid='${paramField.parentId?c}' >

                        <#if paramField.hasGenericParam>
                            <td>
                                <i class="layui-icon x-show" status='true'>&#xe623;</i>
                                ${paramField.paramName}
                            </td>
                            <#elseif paramField.parentId==0>
                                <td>${paramField.paramName}</td>
                                <#else>
                                    <td>&nbsp;&nbsp;&nbsp;&nbsp;${paramField.paramName}</td>
                        </#if>

                        <td><xmp>${paramField.paramType}</xmp></td>
                        <td>${paramField.paramLength}</td>
                        <td>${paramField.required}</td>
                        <td>${paramField.defaultValue}</td>
                        <td>${paramField.paramDescription}</td>
                        <td>${paramField.example}</td>
                    </tr>
                </#list>
                </tbody>
            </table>
        </#if>



        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 15px;">
            <legend>JSON格式化专区：</legend>
        </fieldset>
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md5">
             <span lay-separator="">
               请求参数格式化：
                 <textarea placeholder="" class="layui-textarea" id="reqJsonFormat">
             </textarea>
            </span>
            </div>
            <div class="layui-col-md5">
             <span lay-separator="">
               返回参数格式化：
                 <textarea placeholder="" class="layui-textarea" id="respJsonFormat">
                 </textarea>


            </span>
            </div>
        </div>


        <#if (interfaceDetail.reqParamTypeBO)??>
            <input type="hidden" id="reqParamJson" value='${interfaceDetail.reqParamTypeBO.jsonFormat!}'>
        </#if>
        <#if (interfaceDetail.respParamTypeBO)??>
            <input type="hidden" id="respParamJson" value='${interfaceDetail.respParamTypeBO.jsonFormat!}'>
        </#if>


        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 15px;">
            <legend>测试区：</legend>
        </fieldset>


        <input type="hidden" id="requestMethod" value="${interfaceDetail.requestType!}">
        <input type="hidden" id="relativeUrl" value="${interfaceDetail.address!}">
        <input type="hidden" id="interfaceName" value="${interfaceDetail.name!}">

        <#if (interfaceDetail.reqParamTypeBO)??>
            <input type="hidden" id="requestParamType" value="${interfaceDetail.reqParamTypeBO.paramTypeName!}">
        </#if>



        <#if interfaceDetail.type=='REST'>
            <div class="layui-form-item">
                <label class="layui-form-label">base路径</label>
                <div class="layui-input-block">
                    <input type="text" name="title" id="requestBaseUrl" autocomplete="off" placeholder="基础url路径:http://baidu.com" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">cookies</label>
                <div class="layui-input-block">
                    <input type="text" name="title" id="cookies" autocomplete="off" placeholder="cookie信息,只能指定一个 例如：accessToken=1223432" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">headers</label>
                <div class="layui-input-block">
                    <input type="text" name="title" id="headers" autocomplete="off" placeholder="headers信息，使用;分割，例如：age=3432;page=1" class="layui-input">
                </div>
            </div>
            <#elseif interfaceDetail.type=='DUBBO'>
                <div class="layui-form-item">
                    <label class="layui-form-label">zookeeper:</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" id="zookeeper" autocomplete="off" placeholder="zookeeper地址例如:zookeeper://localhost:2181" class="layui-input">
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">version</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" id="version" autocomplete="off" placeholder="dubbo版本信息" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">group</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" id="group" autocomplete="off" placeholder="dubbo group信息" class="layui-input">
                    </div>
                </div>
        </#if>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">请求参数</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入请求参数,格式参考：{'name':'abc'}" id="requestData" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">

            <#if interfaceDetail.type=='REST'>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button class="layui-btn" onclick="testRest();" >代理提交</button>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button class="layui-btn" onclick="testLocalRest();" >本地调用</button>

                <#elseif interfaceDetail.type=='DUBBO'>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button class="layui-btn" onclick="testDubbo();" >提交</button>
            </#if>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">返回值</label>
            <div class="layui-input-block">
                <textarea placeholder="返回结果" id="result" class="layui-textarea"></textarea>
            </div>
        </div>


    </div>


  </body>

  <script type="text/javascript">

      $(function() {// 初始化内容
          var reqJsonData=$("#reqParamJson").val();
          var respJsonData=$("#respParamJson").val();

          if(reqJsonData!=null){
              $("#reqJsonFormat").text( JSON.stringify(JSON.parse(reqJsonData),null,4));
          }
          if(respJsonData!=null){
              $("#respJsonFormat").text( JSON.stringify(JSON.parse(respJsonData),null,4));
          }
      });



      function testLocalRest(){
          var requestBaseUrl=$("#requestBaseUrl").val();
          var requestRelativeUrl=$("#relativeUrl").val();
          var cookies=$("#cookies").val();
          var headers=$("#headers").val();
          var requestData=$("#requestData").val();
          var requestMethod=$("#requestMethod").val();

          var requestUrl=requestBaseUrl+requestRelativeUrl;

          if(requestMethod=='GET'){
              if(requestData!=null){
                  var data='';
                  var reqData=JSON.parse(requestData);
                  for (var key in reqData){
                      data=data+key+"="+reqData[key]+"&";
                  }
                  requestData=data;
              }
          }
          if(requestMethod=='POST'){
              if(requestData!=null){
                  var data='';
                  var reqData=eval('('+requestData+')');
                  requestData=JSON.stringify(reqData);
              }
          }
          $.ajax({
              type:requestMethod,
              xhrFields: {
                  withCredentials: true // 这里设置了withCredentials
              },
              contentType: 'application/json; charset=UTF-8',
              url:requestUrl,
              dataType:"json",
              async: true,
              data: requestData,
              beforeSend: function(request) {
                  if(cookies){
                      document.cookie=cookies;
                  }
                  if(headers){
                      headers= headers.split(";");
                      for(var header in headers){
                          var headNameAndValue= headers[header].split("=");
                          request.setRequestHeader(headNameAndValue[0], headNameAndValue[1]);
                      };
                  }
              },
              success:function(data){
                  $("#result").val(JSON.stringify(data));
              },
              error:function(data){
                  $("#result").val(data.toLocaleString());
              }
          });

      }


      function testRest(){
          var requestBaseUrl=$("#requestBaseUrl").val();
          var requestRelativeUrl=$("#relativeUrl").val();
          var cookies=$("#cookies").val();
          var headers=$("#headers").val();
          var requestData=$("#requestData").val();
          var requestMethod=$("#requestMethod").val();

          $.ajax({
              type:"POST",
              contentType: 'application/json; charset=UTF-8',
              url:"/itapm/api/rest_test.json",
              dataType:"json",
              data:JSON.stringify( {
                  requestBaseUrl:requestBaseUrl,
                  requestRelativeUrl:requestRelativeUrl,
                  cookies:cookies,
                  headers:headers,
                  requestData:requestData,
                  requestMethod:requestMethod,
              }),
              success:function(data){
                  $("#result").val(data.data);
              },
              error:function(data){
                  $("#result").val(data.data);
              }
          });
          return;
      }


      function testDubbo(){
          var requestData=$("#requestData").val();
          var interfaceName=$("#interfaceName").val();
          var version=$("#version").val();
          var group=$("#group").val();
          var zookeeper=$("#zookeeper").val();
          var requestParamType=$("#requestParamType").val();

          $.ajax({
              type:"POST",
              contentType: 'application/json; charset=UTF-8',
              url:"/itapm/api/dubbo_test.json",
              dataType:"json",
              data:JSON.stringify( {
                  requestData:requestData,
                  interfaceName:interfaceName,
                  version:version,
                  group:group,
                  zookeeper:zookeeper,
                  requestParamType:requestParamType,
              }),
              success:function(data){
                  $("#result").val(data.data);
              },
              error:function(data){
                  $("#result").val(data.data);
              }
          });
          return;
      }


  </script>

</html>